.login_container {
	height: 100%;
	padding: 20px 30px
}

.logo_container {
	position: fixed;
	width: 100%;
	height: 78px;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex
}

.logo_container .logo {
	width: 120px;
	height: 48px
}

.midd {
	height: 100%;
	max-width: 1200px;
	margin: 0 auto;
	-webkit-box-pack: center;
	-ms-flex-pack: center;
	justify-content: center;
	padding: 0 60px
}

.midd .cover,
.midd {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center
}

.midd .cover {
	height: auto;
	border-radius: 18px
}

.midd .cover img {
	display: block;
	width: 100%;
	border-radius: 12px;
	-o-object-fit: cover;
	object-fit: cover
}

.midd .desc {
	color: var(--color-tran-50);
	margin-bottom: 30px
}

@media screen and (max-device-width:875px) {
	.body_mobile .login_container {
		padding: 36px
	}
	.body_mobile .login_container .logo_container .logo {
		width: 117px;
		height: 37px
	}
	.body_mobile .login_container .midd {
		-webkit-box-align: start;
		-ms-flex-align: start;
		align-items: flex-start;
		padding: 78px 0 0
	}
	.body_mobile .login_container .midd .form_container,
	.body_mobile .login_container .midd .login-form {
		width: 100%
	}
	.body_mobile .login_container .midd .form_container>div .title,
	.body_mobile .login_container .midd .login-form>div .title {
		font-weight: 600;
		font-size: 28px;
		line-height: 45px;
		margin-bottom: 6px
	}
	.body_mobile .login_container .midd .form_container>div .desc,
	.body_mobile .login_container .midd .login-form>div .desc {
		font-weight: 600;
		font-size: 15px;
		line-height: 22px;
		margin-bottom: 36px
	}
	.body_mobile .login_container .midd .form_container .login-form-wrap .container .mas-form-input-large,
	.body_mobile .login_container .midd .login-form .login-form-wrap .container .mas-form-input-large {
		padding: 0 18px
	}
	.body_mobile .login_container .midd .form_container .login-form-wrap .invite-tansfer,
	.body_mobile .login_container .midd .login-form .login-form-wrap .invite-tansfer {
		margin-bottom: 6px
	}
	.body_mobile .login_container .midd .form_container .or,
	.body_mobile .login_container .midd .login-form .or {
		margin-top: 36px;
		line-height: 19px
	}
	.body_mobile .login_container .midd .form_container .or span:after,
	.body_mobile .login_container .midd .form_container .or span:before,
	.body_mobile .login_container .midd .login-form .or span:after,
	.body_mobile .login_container .midd .login-form .or span:before {
		top: 9px;
		width: 47%
	}
	.body_mobile .login_container .midd .form_container .mas-button,
	.body_mobile .login_container .midd .login-form .mas-button {
		margin-top: 3px
	}
	.body_mobile .login_container .midd .form_container .mas-button .truncate,
	.body_mobile .login_container .midd .login-form .mas-button .truncate {
		font-weight: 500;
		font-size: 16px;
		line-height: 24px
	}
	.body_mobile .login_container .midd .form_container .forget_password,
	.body_mobile .login_container .midd .login-form .forget_password {
		margin-top: 11px
	}
}

@media only screen and (max-width:1200px) {
	.midd {
		grid-template-columns: auto
	}
	.midd .cover {
		display: none
	}
}